<template>
  <div class="feedback">
    <el-empty v-show="!isShow"
        image="https://cdn.staticaly.com/gh/cf-01/image-hosting@master/images/无权限.7efhrpbpnps0.webp"
        :image-size="450"
        description="想要反馈，请先登录平台.......">
    </el-empty>

    <!--  登录后  -->
    <div class="logined" v-if="isShow">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>用户反馈</span>
        </div>
        <div style="padding: 10px">
          <el-form :model="feedForm" :rules="rules" ref="feedForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="总体问题" prop="feedQuestion">
              <el-input v-model="feedForm.feedQuestion"></el-input>
            </el-form-item>
            <el-form-item label="详细描述" prop="feedDescription">
              <el-input
                  type="textarea"
                  v-model="feedForm.feedDescription"
                  :rows="10"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('feedForm')">立即创建</el-button>
              <el-button @click="resetForm('feedForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
import {addFeedback} from "@/api/allApi";
import {useUser} from "@/store/userStore";


export default {
  name: "Feedback",
  data() {
    return {
      isShow:false,
      feedForm: {
      },
      user:'',
      User:useUser(),
      rules: {
        feedQuestion: [
          { required: true, message: '请输入总体问题', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ],
        feedDescription: [
          { required: true, message: '请填写详细描述', trigger: 'blur' }
        ]
      },

    }
  },
  created() {
    this.user = JSON.parse(window.localStorage.getItem('access-user'))
  },
  watch:{

  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.feedForm.userId = this.user.userId
          addFeedback(this.feedForm).then(res=>{
            if (res.data.success) {
              this.$message.success(res.data.data)
              this.$refs[formName].resetFields();
            }else {
              this.$message.error(res.data.data)
            }
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    toLogin() {
      // this.User.loginDialogVisible = true
    },
  },
  mounted() {
    if (this.user){
      this.isShow = true
    }
  }
}
</script>

<style lang="less" scoped>
  .feedback {
    display: flex;
    justify-content: center;
    margin: auto;
    min-width: 900px;
    width: 80%;
    flex-wrap: wrap;

    .logined {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 600px;
    }
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 600px;
    height: 500px;
  }
</style>